<template>
  <div id="myCourse">
    <header>
      <i @click="goBack()"></i>
      <div>我的课程</div>
    </header>
    <div class="create_course">
      <a @click='goCreateCourse("add")'>
        <span>
          <img src="../../image/create_course.jpg" style="margin-top: 7px;" />
          <i>创建新课程</i>
        </span>
      </a>
    </div>
    <div class="border-8"></div>
    <div class="swipe">
      <div class="allCourse">
        <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
          <ul class="list">
            <li v-for="(item,index) in list" :key='index'>
              <a @click='goNext(item)'>
                <img :src="item.course_pic" />
                <div>
                  <h3>{{item.course_name}}</h3>
                  <div>
                    主讲老师: {{item.teacher_name}}
                  </div>
                  <div class="expiredTime">
                    {{item.starttime}}
                  </div>
                  <p>
                    <i>{{item.iffree=='free'?"0":(item.discount?item.discount:item.charge)}}元</i>
                  </p>
                  <div style="display: flex;justify-content: space-between">
                    <a class="alreadyJoinBtn">已报名</a>
                    <a style="margin-top: 8px">
                      <a @click.stop='goCreateCourse("edit",item.id)' style="margin-right: 10px;color:#a3a3a3">
                        <img src="../../image/t.png" alt="">
                        编辑</a>
                      <a style="margin-right: 10px;color:#ffbc7f" @click.stop='delCourse(item.id)'><img src="../../image/t.png"
                          alt="">删除</a>
                    </a>

                  </div>
                </div>
              </a>
            </li>
          </ul>
        </Loadmore>
      </div>
    </div>
    <div class='mc' v-if="list.length<1" style="top:90px;">
      <div>
        <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
        <p>暂无课程!</p>
      </div>
    </div>
  </div>
</template>
<script>
  import allCourse from '../../components/myCourse/allCourse.vue'
  import payCourse from '../../components/myCourse/payCourse.vue'
  import willExpiredCourse from '../../components/myCourse/willExpiredCourse.vue'
  import {
    MessageBox,
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        list: [],
        isShow: true,
        showMc: false,
        allCourse: 'all-course',
        payCourse: 'pay-course',
        willexpiredCourse: 'will-expiredCourse',
        currentView: 'all-course',
        sentPage: {
          page: 1,
          rows: 10
        },
        allLoaded: false,
        totalNum: 0, //总数据条数
      }
    },
    components: {
      'all-course': allCourse,
      'pay-course': payCourse,
      Loadmore,
      'will-expiredCourse': willExpiredCourse,
    },
    methods: {
      goBack() {
        this.$router.push({
          path: '/my'
        })
      },
      goNext(item) {
        this.$router.push({
          name: 'homeDetail',
          query: {
            id: item.id,
            type: 'myCourse',
            vdoProgress: item.vdoProgress
          }
        });
      },
      //创建或编辑课程
      goCreateCourse(item, id) {
        this.$router.push({
          name: 'createCourse',
          query: {
            type: item,
            id: id
          }
        });
      },
      //删除课程
      delCourse(id) {
        MessageBox.confirm('确定删除该课程及视频?').then(action => {
          this.$api.post(this.$api.baseURLSchool, "course_video_delete", {
            id: id
          }, r => {
            if (r.data.ret == 1) {
              this.$utils._toast('删除成功')
              this.getDetailsData(this.sentPage);
            }
          }, err => {
            console.log(err);
          })

        }, r => {

        });

      },
      // 登录拦截
      isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
      //   //上拉加载
      loadBottom() {
        this.allLoaded = false;
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getDetailsData(this.sentPage);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      getDetailsData(params) {
        this.$api.post(this.$api.baseURLSchool, "/publicself/" + localStorage.getItem('loginMobile') + "", params, r => {
          if (this.sentPage.page == 1) {
            this.list = r.data.info;
          } else {
            this.list = this.list.concat(r.data.info);
          }
          if (r.data.info.length == 0) {
            this.$utils._toast("暂无更多数据");
          }
          if (r.data.ret == -3) {
            localStorage.clear();
            this.isLogin()
          }
        }, err => {
          console.log(err);
        })
      },
    },
    created() {
      this.getDetailsData(this.sentPage);
    },
    mounted() {
      var date = new Date();
      date = this.$utils.commentTime(date, 'yyyy-MM-dd hh:mm:ss');
    }
  }

</script>
<style lang="scss" scoped>
  .create_course a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 7px;
    width: 269px;
    height: 36px;
    line-height: 36px;
    /* background: #e5322d; */
    background: linear-gradient(to bottom, #61bf9f, #56a98c);
    border-radius: 20px;
    color: #fff;
  }

</style>
